<template>
  <el-container class="home-container">
    <el-header>
      <div class="head-l">
        <img class="logo_png" src="@/assets/logo.png" alt=""/>
      </div>
      <div class="head-r">
        <div class="head-r-le" style="padding: 0">
          <div class="head-r-le" style="background: rgba(40, 126, 255, 0.1);">
            <img class="title_png" src="@/assets/fite-system.png" alt=""/>
            <p class="title_teri">客服工单系统</p>
            <div class="bottom_line"></div>
          </div>
          <div class="head-r-le" style="cursor: pointer;" @click="openFenzhang('BUILD_PAY_MODULE_NEW')">
            <img class="title_png" src="@/assets/build-c.png" alt=""/>
            <p class="title_te">筹店建店系统</p>
          </div>
          <div class="head-r-le" style="cursor: pointer;" @click="openFenzhang('LEDGER_ACCOUNT_PAY_MODULE_NEW')">
            <img class="title_png" src="@/assets/titlelogo.png" alt=""/>
            <p class="title_te">分账管理中心</p>
          </div>
          <div class="head-r-le" style="cursor: pointer;" @click="openFenzhang('QUALITY_PAY_MODULE_NEW')">
            <img class="title_png" src="@/assets/quality_c.png" alt="">
            <p class="title_te">质检管理中心</p>
          </div>
          <div class="head-r-le" style="cursor: pointer;" @click="openFenzhang('SUPPLIER_PAY_MODULE_NEW')">
            <img class="title_png" src="@/assets/aiilce_titlogo.png" alt="">
            <p class="title_te">供应商管理中心</p>
          </div>
          <div class="head-r-le" style="cursor: pointer" @click="openFenzhang('FRANCHISEE_MODULE_NEW')">
            <img class="title_png" src="@/assets/franch-c.png" alt="">
            <p class="title_te">加盟商结算系统</p>
          </div>
        </div>
        <p class="title_rite">{{ shopName }}【{{ code }}】</p>
      </div>
    </el-header>
    <el-container class="home_core">
      <el-aside width="200px">
        <!-- <el-menu
          v-if="menuReady"
          class="el-menu-vertical-demo"
          :unique-opened="true"
          router
          active-text-color="#287EFF"
          :default-active="activePath"
        >
          <template v-for="item in menusList">
            <el-submenu v-if="item.children?.length > 0" :index="item.web_href">
              <template slot="title">
                <svg-icon style="font-size: 18px; margin-right: 9px" :icon-class="item.icon"/>
                <span slot="title">{{ item.web_title }}</span>
              </template>
              <el-menu-item
                v-for="it in item.children"
                :index="item.web_href + it.web_href"
                :key="it.web_href"
              >
                {{ it.web_title }}
              </el-menu-item>
            </el-submenu>

            <el-menu-item v-else :index="item.web_href">
              <svg-icon style="font-size: 18px; margin-right: 9px" :icon-class="item.icon"/>
              <span slot="title">{{ item.web_title }}</span>
            </el-menu-item>
          </template>
        </el-menu> -->
      </el-aside>
      <el-main>
        <el-menu
          v-if="menuReady"
          class="el-menu-vertical-demo"
          mode="horizontal"
          :unique-opened="true"
          router
          active-text-color="#287EFF"
          :default-active="activePath"
        >
          <template v-for="item in menusList">
            <el-submenu v-if="item.children?.length > 0" :index="item.web_href">
              <template slot="title">
                <svg-icon style="font-size: 18px; margin-right: 9px" :icon-class="item.icon"/>
                <span slot="title">{{ item.web_title }}</span>
              </template>
              <el-menu-item
                v-for="it in item.children"
                :index="item.web_href + it.web_href"
                :key="it.web_href"
              >
                {{ it.web_title }}
              </el-menu-item>
            </el-submenu>

            <el-menu-item v-else :index="item.web_href">
              <svg-icon style="font-size: 18px; margin-right: 9px" :icon-class="item.icon"/>
              <span slot="title">{{ item.web_title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
        <bread-crumb/>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import BreadCrumb from "@/components/breadcrumb";

export default {
  components: {BreadCrumb},
  data() {
    return {
      activePath: "",
      menusList: [],
      code: localStorage.getItem("supportsystem_code"),
      shopName: localStorage.getItem("supportsystem_shopName"),
      menuReady:false
    };
  },
  watch: {
    $route: {
      handler: function (newVal, oldVal) {
        let patharr = newVal.path.split("/");
        if(patharr.length - 1 > 2) patharr.splice(3)
        if(newVal.meta.routerTwo){   // routerTwo 只有两级
          patharr.splice(2)
        }
        this.activePath = patharr.join("/");
      },
      immediate: true,
    },
  },
  mounted() {
    this.menusList = this.$store.state.AsideMenu;
    this.$nextTick(() => this.menuReady = true)
  },

  methods: {
    async openFenzhang(moduleCode='') {
      const data = await this.$http.LogoService.pmsConfig({})
      let List = data || []
      let pa = List.find(item => item.moduleCode == moduleCode)
      let isEnabled = pa.enabled
      //员工分账 加个条件userLedger
      if (moduleCode == 'LEDGER_ACCOUNT_PAY_MODULE_NEW') isEnabled = pa.userLedger && pa.enabled
      if (!isEnabled) {
        this.$notify.info({
          title: '提示',
          message: `未开启${pa.moduleName}`,
          position: 'top-left'
        });
        return
      }
      if (!pa.url) {
        this.$notify.warning({
          title: '警告',
          message: `未查询到${pa.moduleName}地址`,
          position: 'top-left'
        });
        return
      }
      let url = pa.url + localStorage.getItem('supportsystem_fzurlPath')
      window.open(url)
    }
  },
};
</script>
<style lang="less" scoped>
.home-container {
  width: 100%;
  height: 100%;

  .home_core {
    width: 100%;
    height: calc(100% - 60px);
  }
}

.el-menu-item {
  display: flex;
  align-items: center;
}

.el-menu-item.is-active .svg-icon {
  color: inherit;
}
.el-menu-item.is-active{
  background-color: #ecf5ff;
}

.el-menu {
  border-right: none !important;
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.head-l {
  display: flex;
  align-items: center;
  width: 200px;
  height: 100%;
  background: #287eff;
  padding: 0 20px;
  box-sizing: border-box;

  .logo_png {
    width: 103px;
    height: 30px;
  }
}

.head-r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding-right: 20px;
  height: 100%;
  box-sizing: border-box;

  .head-r-le {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    .bottom_line {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background: #287eff;
    }
  }

  .el-icon-s-shop {
    font-size: 22px;
    color: #287eff;
  }

  .title_teri {
    color: #287eff;
    font-size: 22px;
  }

  .title_png {
    width: 22px;
    height: 22px;
    margin-right: 4px;
  }

  .title_te {
    font-size: 22px;
    color: #313b4b;
    line-height: 26px;
  }

  .title_rite {
    font-size: 16px;
    color: #313b4b;
  }
}

.el-aside {
  background-color: #fff;
}

.el-main {
  background-color: #f5f5f5;
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-bottom: 0;
}
</style>
